<template>
  <view v-if="!slotStatus" class="remote-select" @click="toSelectorPage()">
    <view class="remote-select_input" :class="[disabled ? 'remote-select_input-disabled' : '']">
      <text v-if="label">{{ label }}</text>
      <text v-else style="color: #9ea5bb">{{ placeholder }}</text>
    </view>
    <view v-if="disabled == false && label && allowClear" class="remote-select_clear" @click.stop="handleClear">
      <ve-icon name="icon-clear" size="32" />
    </view>
    <view class="remote-select_arrow">
      <ve-icon name="arrow_right_0" size="32" :block="true" />
    </view>
  </view>
  <view v-else class="remote-select" @click="toSelectorPage()">
    <slot name="remote-select"></slot>
  </view>
  <!-- 选择弹框 -->
  <!-- <SelectorModal ref="selectorModal" @change="onChange"></SelectorModal> -->
</template>

<script setup>
  const props = defineProps({
    mustParentTip: String,
    modelValue: undefined,
    label: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    multiple: Boolean,
    type: {
      type: String,
      default: 'site',
    },
    params: {
      type: Object,
      default: () => {},
    },
    outData: Array,
    placeholder: {
      type: String,
      default: '请选择',
    },
    config: {
      type: Object,
      default: () => {},
    },
    disabledValue: undefined,
    slotStatus: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
    allowClear: {
      type: Boolean,
      default: false,
    },
  })
  const emits = defineEmits(['change', 'update:modelValue', 'update:label'])

  // const onChange = (value, label, option) => {
  //   emits('update:modelValue', value)
  //   emits('update:label', label)
  //   emits('change', value, option)
  // }
  const toSelectorPage = () => {
    if (props.mustParentTip) {
      uni.showToast({
        icon: 'none',
        title: props.mustParentTip,
      })
      return
    }
    // 跳转选择页面
    if (!props.disabled) {
      uni.navigateTo({
        url: '/pages/utils/selector?title=' + props.title,
        events: {
          selectorConfirm: (value, label, option = {}) => {
            // 发生变化，触发chage事件
            emits('update:modelValue', value)
            emits('update:label', label)
            if (props.modelValue != value) {
              emits('change', value, option)
            }
          },
        },
        success: (res) => {
          // 传递数据
          // modelValue 为数组的话，需要处理下
          const value = props.modelValue instanceof Array ? [...props.modelValue] : props.modelValue
          res.eventChannel.emit('selectorInit', {
            type: props.type,
            params: props.params,
            value,
            multiple: props.multiple,
            outData: props.outData,
            disabledValue: props.disabledValue,
            config: props.config,
            required: props.required,
          })
        },
      })
    }
  }
  const handleClear = () => {
    emits('update:modelValue', undefined)
    emits('update:label', undefined)
    emits('change', undefined, {})
  }
</script>

<style lang="less" scoped>
  .remote-select {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    &_input {
      font-size: 30rpx;
      font-weight: 400;
      color: #191c27;
      line-height: 44rpx;
      text-align: right;
      flex: 1;
    }
    &_input-disabled {
      color: rgb(132, 145, 168);
    }
    &_arrow {
      height: 32rpx;
      flex-shrink: 0;
    }
    &_clear {
      display: flex;
      padding-left: 10rpx;
      padding-right: 4rpx;
    }
  }
</style>
